@include("system::admin.layouts._header")
<body>
<style>
    #spec-table th {
        text-align: center;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form" method="post">

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>商品图册</li>
                <li>移动端详情</li>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">

                    <div class="layui-form-item">
                        <label class="layui-form-label required">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="lang[goods_name]" class="layui-input" lay-verify="required"
                                   lay-reqtext="请输入名称" placeholder="请输入名称" value="{{$goods->goods_name}}">
                            <tip>填写名称。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">短标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="lang[short_title]" class="layui-input"
                                   placeholder="请输入短标题" value="{{$goods->short_title ?? ''}}">
                            <tip>填写短标题。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">主图</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="lang[goods_image]" class="layui-input layui-col-xs6" placeholder="请上传主图"
                                   value="{{$goods->goods_image ?? ''}}">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="lang[goods_image]" data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea name="lang[description]" class="layui-textarea"
                                      placeholder="请输入描述">{{$goods->description ?? ''}}</textarea>
                            <tip>填写描述。</tip>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">详情</label>
                        <div class="layui-input-block">
                            <textarea id="lang[content]" name="lang[content]" rows="20" class="layui-textarea editor"
                                      placeholder="请输入内容">{{$goods->content ?? ''}}</textarea>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item" id="albums-tab">
                    @if(isset($goods->goods_albums))
                        @foreach($goods->goods_albums as $key => $albums)
                            <div class="layui-card">
                                <div class="layui-card-header">商品图册<a href="javascript:"
                                                                          style="color: #1e9fff;margin-left: 5px;"
                                                                          class="delete-item">[ - ]</a></div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">图片</label>
                                        <div class="layui-input-block layuimini-upload">
                                            <input name="lang[goods_albums][{{$key}}]" class="layui-input layui-col-xs6"
                                                   placeholder="请上传商品图册" value="{{$albums}}">
                                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="lang[goods_albums][{{$key}}]"
                                         data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    <div class="layui-form-item" id="albums-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-albums-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                增加图片 +
                            </button>
                        </div>
                    </div>

                </div>

                <div class="layui-tab-item" id="mobile-tab">

                    @foreach($goods->mobile_images ?? [] as $key => $image)
                        <div class="layui-card">
                            <div class="layui-card-header">详情图片<a href="javascript:"
                                                                      style="color: #1e9fff;margin-left: 5px;"
                                                                      class="delete-spec-item">[ - ]</a></div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">图片</label>
                                    <div class="layui-input-block layuimini-upload">
                                        <input name="lang[mobile_images][{{$key}}]" class="layui-input layui-col-xs6"
                                               placeholder="请上传详情图片" value="{{$image}}">
                                        <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="lang[mobile_images][{{$key}}]"
                                         data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="layui-form-item" id="mobile-button">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" id="add-mobile-button"
                                    class="layui-btn layui-btn-primary layui-btn-sm">
                                增加图片 +
                            </button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="hr-line"></div>
            <div class="layui-form-item text-center">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
            </div>
        </div>

    </form>
</div>

<div style="display: none" id="mobile-tpl">
    <div class="layui-card">
        <div class="layui-card-header">详情图片<a href="javascript:" style="color: #1e9fff;margin-left: 5px;"
                                                  class="delete-spec-item">[ - ]</a></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label required">图片</label>
                <div class="layui-input-block layuimini-upload">
                    <input name="lang[mobile_images][{num}]" class="layui-input layui-col-xs6" placeholder="请上传主图"
                           value="">
                    <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="lang[mobile_images][{num}]"
                                         data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="display: none" id="albums-tpl">
    <div class="layui-card">
        <div class="layui-card-header">商品图册<a href="javascript:" style="color: #1e9fff;margin-left: 5px;"
                                                  class="delete-item">[ - ]</a></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label required">图片</label>
                <div class="layui-input-block layuimini-upload">
                    <input name="lang[goods_albums][{num}]" class="layui-input layui-col-xs6" placeholder="请上传商品图册"
                           value="">
                    <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="lang[goods_albums][{num}]"
                                         data-upload-number="one"
                                         data-upload-exts="ico|png|jpg|jpeg"><i
                                            class="fa fa-upload"></i> 上传</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        $('#add-diy-button').click(
            function () {
                var html = $('#diy-tpl').html();
                $('#diy-button').before(html);
            }
        );
    });
</script>

</body>
</html>
